<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_函数式组件props</title>
</head>

<body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 转换jsx的库 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入PropType库  min没有警告-->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">/* 此处要写babel */
        // 函数式组件使用props
        // function Person(props) {
        //     const { name, age, sex } = props
        //     return (
        //         <ul>
        //             <li>姓名：{name}</li>
        //             <li>年龄：{age} </li>
        //             <li>性别：{sex} </li>
        //         </ul>
        //     )
        // }

        // Person.propTypes = {
        //     name: PropTypes.string.isRequired,
        //     age: PropTypes.number,
        //     sex: PropTypes.string
        // }
        // // defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
        // Person.defaultProps = {
        //     age: 25,
        //     sex: '男'
        // }

        function Person({ name, age = 25, sex = '男' }) {
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age} </li>
                    <li>性别：{sex} </li>
                </ul>
            )
        }

        Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string
        }

        // ReactDOM.render 不再支持
        const root = ReactDOM.createRoot(document.getElementById('test'));
        const P = { name: "Wangwu" }
        root.render(<Person {...P} />);


    </script>
</body>

</html>